<script>
export default {
  name: "CardExamplePage",
  data() {
    return {
      tableData: [
        {
          name: "校长1",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长2",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长6",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长5",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长4",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
        {
          name: "校长3",
          age: 13,
          sex: "男",
          data: "2024-5-8",
          address: "江苏省南京市南京信息工程大学"
        },
      ],
      currentPageData:[]
    }
  },
  methods: {
    handleCurrentChange(current) {
      this.refreshCurrentPageData(current)
    },
    handleSizeChange(size) {

    },
    refreshCurrentPageData(current){
      this.currentPageData = []
      for(let i = (current-1)*10 ; i < current * 10 ; i++){
        this.currentPageData.push(this.tableData[i])
      }
    }

  },
  created(){
    this.refreshCurrentPageData(1)
  }
}
</script>

<template>
 <div style="padding: 20px">
   <el-card>
    <div slot="header">
      <span>数据表</span>
    </div>
     <div>
       <el-table :data = currentPageData stripe border>
         <el-table-column label="名字"  width="200">
           <template v-slot="scope">
             <el-tag>{{scope.row.name}}</el-tag>
           </template>
         </el-table-column>
         <el-table-column label="年龄" prop="age" width="200"></el-table-column>
         <el-table-column label="性别" prop="sex" width="200"></el-table-column>
         <el-table-column label="日期" prop="data" width="200"></el-table-column>
         <el-table-column label="地址" prop="address" width="200"></el-table-column>
         <el-table-column label="操作功能">
           <template>
             <el-button type="primary" size = "mini" plain icon = "el-icon-edit">编辑</el-button>
             <el-button type="danger" size = "mini" plain icon = “el-icon-delete”>删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
     <div>
       <el-pagination :total = "tableData.length"
                      style="margin-top: 20px"
                      @current-change ="handleCurrentChange"
                      @size-change = "handleSizeChange"
                      layout="sizes,prev,pager,next,jumper,total"/>
     </div>

   </el-card>
 </div>
</template>

<style scoped>

</style>